<template>
  <m-box title="生产管理" size="small" class="product-management">
    <ul class="w-row">
      <li class="w-item">
        <div class="m-row">
          <m-col :span="24" v-for="d in data" :key="d.caption">
            <div class="caption">
              <span>{{ d.caption }}</span>
            </div>
            <ul class="list">
              <li
                class="list-item"
                v-for="l in d.list"
                :key="d.caption + l.title"
                :style="{ color: `${l.color}` }"
              >
                <div class="item-icon">
                  <i :class="['iconfont', `${l.icon}`]"></i>
                </div>
                <div class="item-name">{{ l.title }}</div>
                <div class="item-value">{{ l.value }}</div>
              </li>
            </ul>
          </m-col>
        </div>
      </li>
      <li class="w-item">
        <ringChart
          title="当年工单达成率"
          digital-color="#7FFF00"
          :rate="yearRate"
          :data="yearData"
        />
      </li>
      <li class="w-item">
        <ringChart
          title="当月工单达成率"
          digital-color="#BA55D3"
          :rate="monthRate"
          :data="monthData"
        />
      </li>
    </ul>
  </m-box>
</template>
<script setup>
import http from '@/utils/request'
import { numberFormat } from '@/utils/tools'
import ringChart from './widget/ringChart/index.vue'

function setData(res = {}) {
  return [
    {
      caption: '当年',
      list: [
        {
          title: '工单数',
          value: numberFormat(res.totalYearQty || 0),
          color: '#22699F',
          icon: 'icon-image-text'
        },
        {
          title: '在产数',
          value: numberFormat(res.ongoingYearQty || 0),
          color: '#6B7169',
          icon: 'icon-calendar'
        },
        {
          title: '完工数',
          value: numberFormat(res.ssYearQty || 0),
          color: '#087291',
          icon: 'icon-complete'
        }
      ]
    },
    {
      caption: '当月',
      list: [
        {
          title: '工单数',
          value: numberFormat(res.moMonthQty || 0),
          color: '#22699F',
          icon: 'icon-image-text'
        },
        {
          title: '在产数',
          value: numberFormat(res.ongoingMonthQty || 0),
          color: '#6B7169',
          icon: 'icon-calendar'
        },
        {
          title: '完工数',
          value: numberFormat(res.ssMonthQty || 0),
          color: '#087291',
          icon: 'icon-complete'
        }
      ]
    }
  ]
}
const data = ref(setData())

const yearData = ref([
  { name: '在产工单数', value: 1 },
  { name: '完工工单数', value: 1 }
])
const monthData = ref([
  { name: '在产工单数', value: 1 },
  { name: '完工工单数', value: 1 }
])
// 当年工单达成率
const yearRate = ref(0)
// 当月工单达成率
const monthRate = ref(0)

const getData = async () => {
  try {
    const res = await http.get('/v1/kanban/getMOProductionStatisticsReport')
    data.value = setData(res)

    yearRate.value = Math.floor(res.yearRate * 100) / 100
    monthRate.value = Math.floor(res.monthRate * 100) / 100
    yearData.value = [
      { name: '在产工单数', value: res.ongoingYearQty },
      { name: '完工工单数', value: res.ssYearQty }
    ]
    monthData.value = [
      { name: '在产工单数', value: res.ongoingMonthQty },
      { name: '完工工单数', value: res.ssMonthQty }
    ]
  } catch (e) {
    console.error(e)
  }
}

function init() {
  getData()
}
onMounted(() => {
  init()
})
// 暴露方法
defineExpose({
  init
})
</script>
<style lang="less" scoped>
.product-management {
  ::v-deep(.m-box__body) {
    overflow: auto;
    .dv-border-box-7 {
      .border-box-content {
        height: 100%;
        position: relative;
        .w-row {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          .w-item {
            flex: 1;
            .m-row {
              height: 100%;
              .m-col {
                height: 50%;
                display: flex;
                align-items: center;
                .caption {
                  width: 36px;
                  height: 60px;
                  text-align: center;
                  background-color: rgba(106, 104, 223, 0.1);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  span {
                    display: inline-block;
                    width: 1em;
                  }
                }
                .list {
                  height: 100%;
                  margin-left: 5px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: space-around;
                  .list-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    background-color: rgba(106, 104, 223, 0.1);
                    width: 120px;
                    line-height: 20px;
                    font-size: 12px;
                    padding: 0 5px;
                    > div {
                      flex: 1;
                      text-align: center;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
